import React,{Component} from 'react';
import { connect } from 'react-redux';
import { Card,Button,Table,message,Modal} from 'antd';
import {reqTeacherSubjectList,reqSearchSubjectStudent} from '../../api';
import { saveCurriculumListAction} from '../../redux/action_creators/course_action';
import {PAGE_SIZE} from '../../config';
import dayjs from 'dayjs';
@connect(
    state=>({
        course:state.course,
    }),{
        saveCurriculumList:saveCurriculumListAction,
    }
)
class Subject extends Component {
    state={
        curriculumList:[],//用户列表
        isLoading:true, //table是否显示加载动画
        id:'',
        isVisible:false,
        studentList:[]
    }
    componentDidMount(){
        this.getSubjectList()
    }

    // 获取课程列表
    getSubjectList = async () => {
        let result = await reqTeacherSubjectList()
        const { code,data,msg} = result
        // console.log(result);
       if(code === 200){
            this.setState({
                curriculumList:data,
                isLoading:false,
            })
            //   数据为空时，显示提示信息
              if(data.length===0) message.success(msg,1)  
        }else{
            message.error(msg,1)      
        } 
    }
    showModelStudent= async(courseId)=>{
            // 展示弹窗
        let result = await reqSearchSubjectStudent(courseId)
        const { code,data,msg} = result
        if(code === 200){
        if(data.length===0)  message.success(msg,1)
            this.setState({
                studentList:data,
                isVisible:true,
            })
        }else{
            message.error(msg,1)      
        } 
    }
    render(){
        const  {curriculumList,isVisible,studentList} = this.state
          const columns = [
            {title: '课程编号',
                dataIndex: 'courseNum',
                key: 'id',
            },
            {title: '课程名称',
              dataIndex: 'courseName',
              key: 'id',
            },
            {title: '课程类型',
              dataIndex: 'courseType',
              key: 'id',
            },
            {title: '授课地点',
                dataIndex: 'courseRoom',
                key: 'id', 
            },
            {title: '课程日期',
                dataIndex: 'courseDate',
                key: 'id', 
                render:(courseDate)=>{return courseDate? courseDate.replace(/,/g, " 至 "):''}
            },
            {title: '课程周期',
              dataIndex: 'courseWeek',
              key: 'id',
             
            },
            {title: '课程时间',
                dataIndex: 'courseTime',
                key: 'id',
                render:(courseTime)=>{ return courseTime ? courseTime.replace(/,/g, " 至 ") : ''}
            },
            {title: '操作',
                key: 'id',
                align:'center',
                render:(item)=>{
                    return(
                        <div>
                         {/* <Button type="link" onClick={()=>{this.showModelStudent(item.id)}}>学员</Button> */}
                        <Button  type="link" onClick={()=>{this.props.history.push(`/training/teacher/personal/subject/score/${item.id}`)}}>学员及评分</Button>
                        <Button type="link" onClick={()=>{this.props.history.push(`/training/teacher/personal/subject/detail/${item.id}`)}}>课程详情</Button>
                        </div>
                        )
                }
            },
          ];
          const studentColumns = [
            {
              title: '姓名',
              dataIndex: 'username',
              key: 'id',
            },
            {
                title: '学号',
                dataIndex: 'userNum',
                key: 'id',
              },
            {
              title: '邮箱',
              dataIndex: 'email',
              key: 'id',
            },
            {
                title: '生日',
                dataIndex: 'birthday',
                key: 'id',
                render:time=>dayjs(time).format('YYYY年MM月DD日')
            },
            {
              title: '电话',
              dataIndex: 'phone',
              key: 'id',
            },
            {
                title: '选课时间',
                dataIndex: 'createTime',
                key: 'id',
                render:time=>dayjs(time).format('YYYY年MM月DD日  HH:mm:ss')
            },
            {
                title: '性别',
                dataIndex: 'sex',
                key: 'id',
            }  
          ];
        return (
            <div>
                <Card>
                    <Table 
                        dataSource={curriculumList} 
                        columns={columns}
                        bordered
                        rowKey='id'
                        pagination={{
                            pageSize:PAGE_SIZE,
                        }}
                        loading={this.state.isLoading} 
                    />
                </Card>
                <Modal
                    title="课程学员"
                    visible={isVisible}
                    onOk={()=>this.setState({isVisible:false})}
                    onCancel={()=>this.setState({isVisible:false})}
                    footer={null}
                    maskClosable={false}
                    width={1200}
                    >
                     <Table 
                        dataSource={studentList} 
                        columns={studentColumns}
                        bordered
                        rowKey='id'
                        pagination={{
                            pageSize:PAGE_SIZE,
                        }}
                        loading={this.state.isLoading} 
                    />
                </Modal>
            </div>
        );
    }
}
export default Subject;